<template>
  <!-- :disabled="disabledTip" -->
  <el-tooltip
    ref="tlp"
    :content="text"
    effect="dark"
    :disabled="!showTooltip"
    :placement="placement"
    class="cell"
  >
    <p @mouseenter="visibilityChange($event)">
      <span :class="className" class="s-tooltip">
        <slot>无</slot>
      </span>
    </p>
  </el-tooltip>
</template>

<script>
export default {
  name: "EllipsisTooltip",
  props: {
    placement: { type: String, default: "top-start" },
    className: { type: String, default: "" }, // class
  },
  data() {
    return {
      disabledTip: false,
      showTooltip: false,
      text: "",
    };
  },
  methods: {
    // tooltip的可控
    visibilityChange(event) {
      const ev = event.target;
      this.text = ev.innerText;
      this.showTooltip = ev.scrollWidth > ev.offsetWidth;
    },
  },
};
</script>
